<!-- 数字化回单 -->
<template>
  <div :style="digitalizeWrap">
    <div>
      <div :style="headerTitle">
        <div>数字化回单</div>
        <div v-if="!!cert.ereData"
             :style="makeBox">报告创建时间：{{ cert.ereData.signTime }}</div>
        <span class="print-btn">
          <el-button type="primary"
                     @click="printHandle">打印预览</el-button>
        </span>
      </div>
    </div>
    <el-skeleton style="width: 100%"
                 :loading="loading"
                 :throttle="100"
                 animated>
      <anchor v-if="isAnchor"
              :nav-list="navList"
              :style="mainBox">
        <div id="part1"
             :style="computedPartHeight">
          <certificate :value="certificate"
                       @downloadCount="downloadCount" />
        </div>
        <div id="part2"
             :style="computedPartHeight">
          <order :value="order" />
        </div>
        <div id="part3"
             :style="computedPartHeight">
          <transport :value="transport" />
        </div>
        <div id="part4"
             :style="computedPartHeight">
          <sign :value="sign" />
        </div>
        <div id="part5"
             :style="computedPartHeight">
          <iocus v-if="routeQuery.orderId"
                 :value="routeQuery.orderId" />
        </div>
      </anchor>
    </el-skeleton>
    <!-- 打印 -->
    <!-- <PrintDigitalize ref="printWrap"
                     :value="sign" /> -->
  </div>
</template>

<script>
import cert from '@/api/modules/cert'
import Iocus from './components/Iocus.vue'
import Sign from './components/Sign.vue'
import Transport from './components/Transport.vue'
import Certificate from './components/Certificate.vue'
import Order from './components/Order.vue'
import Anchor from './components/Anchor.vue'
// import PrintDigitalize from '@views/print/digitalize/Index.vue'
export default {
  name: 'Digitalize',
  components: { Anchor, Certificate, Order, Transport, Sign, Iocus },
  data () {
    return {
      navList: [
        {
          label: "证书信息",
          value: 1,
          id: "part1",
        },
        {
          label: "订单信息",
          value: 2,
          id: "part2",
        },
        {
          label: "运输节点信息",
          value: 3,
          id: "part3",
        },
        {
          label: "签收信息",
          value: 4,
          id: "part4",
        },
        {
          label: "运输轨迹",
          value: 5,
          id: "part5",
        },
      ],
      id: '',
      cert: {},
      tableData: [],
      loading: true,
      count: 0,
      isRequest: false,
      dialogVisible: false
    }
  },
  computed: {
    routeQuery () {
      return this.$route.query
    },
    addKey () {
      return data => data.map((item, key) => {
        return { ...item, id: key }
      })
    },
    isAnchor () {
      return this.isRequest
    },
    sign () {
      return this.cert || {}
    },
    order () {
      return { certOrder: this.cert?.orderInfoResult }
    },
    transport () {
      return this.cert?.devicePositionResult || {}
    },
    certificate () {
      return { ...this.cert, count: this.count || 0 }
    },
    computedPartHeight () {
      return {
        marginBottom: '10px'
      }
    },
    digitalizeWrap () {
      return {
        background: "#ffffff",
        borderRadius: "10px",
        padding: "20px"
      }
    },
    headerTitle () {
      return {
        textAlign: "center",
        fontSize: "24px",
        fontWeight: "bold",
        color: "#000000",
        position: "relative"
      }
    },
    makeBox () {
      return {
        fontSize: "14px",
        fontFamily: "PingFang SC",
        fontWeight: "400",
        lineHeight: "30px",
        color: "#666666",
        borderBottom: "1px solid #cccccc",
        paddingBottom: "22px"
      }
    },
    mainBox () {
      return {
        height: '100%'
      }
    }
  },
  mounted () {
    this.getCertChainEvidence()
  },
  methods: {
    async getCertChainEvidence () {
      // let stringParams = String(this.arguments.orderId)
      let response = await cert.getCertChainEvidence(this.routeQuery.orderId)
      this.count = response.data.count
      this.cert = response.data
      this.isRequest = true
      this.loading = false
    },
    printHandle () {
      const { href } = this.$router.resolve({
        name: "digitalizePrint",
        query: {
          orderId: this.routeQuery.orderId
        }
      });
      window.open(href, "_blank");
    },
    /* 次数更新 */
    downloadCount (value) {
      this.count = value
    }
  }
}
</script>

<style lang="scss" scoped>
#part1,
#part2,
#part3,
#part4,
#part5 {
  // height: 500px;
  margin-bottom: 10px;
}
.main-box {
  height: 100%;
}
.digitalize-wrap {
  background: var(--prev-bg-white);
  border-radius: 10px;
  padding: 20px;
}
.print-btn {
  position: absolute;
  right: 0;
  top: 0;
  /* padding-top: 20px; */
}
.title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  /* line-height: 33px; */
  color: #000000;
  position: relative;
}
.make-box {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 30px;
  color: var(--prev-color-text-darkgrey);
  border-bottom: 1px solid var(--prev-border-color-grey);
  padding-bottom: 22px;
}
</style>